<template>
  <div>
    <div class="search_wrap">
      <van-nav-bar
        title="频道文章"
        left-text="返回"
        left-arrow
        fixed
        @click-left="$router.go(-1)"
      />
    </div>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
      >
        <article-item
          v-for="(item, index) in articleList"
          :key="item.art_id"
          :articleItem="item"
          :isShow="false"
          @click.native="itemClick(item.art_id)"
        ></article-item>
      </van-list>
    </div>
  </div>
</template>

<script>
// .native绑定原生点击事件
import { searchResult } from "@/api/index";
import articleItem from "@/components/articleItem.vue";
export default {
  components: { articleItem },
  name: "searchResult",
  components: {
    articleItem,
  },

  data() {
    return {
      page: 1,
      articleList: [],
      loading: false,
      finished: false,
    };
  },
  async created() {
    // console.log(this.$route);
    let res = await searchResult({ page: this.page, q: this.$route.params.kw });
    this.articleList = res.data.data.results;
  },
  methods: {
    async onLoad() {
      if (this.articleList.length > 0) {
        this.page++;
        let res = await searchResult({
          page: this.page,
          q: this.$route.params.kw,
        });
        if(res.data.data.results.length===0){
          this.finished=true
          return
        }
        this.articleList =[...this.articleList,...res.data.data.results];
        this.loading=false 
        // 404 无法解决后端问题（前端可以给个占位符提示）
        // 403 无权请求次地址，后端做了图片防盗链（不想让别的网站引入），后端会判断请求时，
        // reffer字段来源是不是自己的地址
        // 解决：meta标签里不让浏览器携带请求头里的reffer，让后端判断失效
      }
    },
    itemClick(e){
      this.$router.push({
        path:`/detail?art_id=${e}`
      })
    }
  },
};
</script>

<style>
.search_wrap {
  padding-top: 46px;
}
</style>